<!-- 物业投诉 -->
<template>
  <div class="complaint">
    <!-- 标题栏 -->
    <myheader title="物业投诉" rightBtn="投诉记录" @updataInfo="submitRecruit"></myheader>

    <!-- 内容 -->
    <div class="complaint_div_title">填写投诉信息</div>
    <ul class="complaint_div">
      <li class="complaint_div_li">
        <div class="complaint_div_li_div">投诉标题:</div>
        <el-input
          type="textarea"
          show-word-limit="true"
          autosize
          placeholder="请输入标题"
          v-model="complaint.title"
        ></el-input>
      </li>
      <li>
        <div>
          投诉情况：
          <span></span>
        </div>
        <el-input
          type="textarea"
          show-word-limit="true"
          placeholder="请输入内容"
          v-model="complaint.content"
        ></el-input>
      </li>
      <li>
        <div>上传照片：</div>
        <van-uploader
          v-model="fileList"
          :max-count="4"
          multiple
          :after-read="afterRead"
          :before-read="beforeRead"
        >
          <template #preview-cover="{ file }">
            <div class="preview-cover van-ellipsis">{{ file.name }}</div>
          </template>
        </van-uploader>
      </li>
      <div class="complaint_div_btn">
        <el-button @click="upload">提交</el-button>
      </div>
    </ul>
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
import { Notify } from 'vant'
export default {
  components: {
    myheader,
  },
  data() {
    return {
      complaint: {
        title: '',
        content: '',
        userId: this.$store.getters.getUserInfo.id.toString(),
      },
      fileList: [],
      flag: false,
    }
  },

  methods: {
    // 上传预处理
    beforeRead(file) {
      const FileExt = file.name.replace(/.+\./, '')
      const isJPG = !(['jpg', 'png'].indexOf(FileExt.toLowerCase()) === -1)
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        Notify({
          type: 'danger',
          message: '上传头像图片只能是 JPG / png 格式!',
        })
      } else if (!isLt2M) {
        Notify({ type: 'danger', message: '上传头像图片大小不能超过 5M!' })
      } else {
        this.flag = true
      }
      return isJPG && isLt2M
    },
    // 文件上传
    upload() {
      if (this.complaint.title == '') {
        Notify({ type: 'warning', message: '请填写标题' })
        return
      } else if (this.complaint.content == '') {
        Notify({ type: 'warning', message: '填写投诉内容' })
        return
      } else if (!this.flag) {
        Notify({ type: 'warning', message: '请选择上传图片' })
        return
      } else {
        let formData = new FormData()
        for (let index = 0; index < this.fileList.length; index++) {
          formData.append('imgFiles', this.fileList[index].file)
        }
        formData.append(
          'propertyComplaint',
          new Blob([JSON.stringify(this.complaint)], {
            type: 'application/json',
          })
        )

        this.$axios
          .post('/property/complaint/save', formData, {
            headers: { 'Content-Type': 'multipart/form-data' },
          })
          .then((res) => {
            if (res.data.code == 200) {
              Notify({ type: 'success', message: '提交成功！' })
              this.complaint.title = ''
              this.complaint.content = ''
              this.fileList = []
            }
          })
          .catch(() => {})
      }
    },

    submitRecruit() {
      this.$router.push('/complaintHistory')
    },
  },
}
</script>

<style>
.complaint_div {
  padding: 3%;
  margin-top: 15px;
}
.complaint_div_title {
  font-size: 18px;
  color: #bbbbbb;
  width: 100%;
  background-color: #f1f1f1;
  padding: 5px;
}
.complaint_div_title > span {
  color: red;
}

/* 投诉内容开始 */
.complaint_div > li {
  padding-top: 3%;
  padding-left: 3%;
  padding-right: 3%;
}
.complaint_div > li > div {
  font-size: 16px;
  margin-bottom: 3%;
}
.complaint_div > li > div > span {
  color: red;
}

/* 提交按钮 */
.complaint_div_btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
